<script>
import {get_deleted, recover_qa} from "@/middleware/interface";
import {ElMessage, ElMessageBox} from "element-plus";
import {Files, Refresh} from "@element-plus/icons-vue";

export default {
  components: {Files, Refresh},
  data() {
    return {
      lists: [],
      loading: true
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    async recover(qid) {
      ElMessageBox.confirm(
          '是否恢复此问卷？',
          '请确认',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(async () => {
            await recover_qa({
              qid: qid
            })
            ElMessage.success("恢复成功")
            await this.getData()
          })
          .catch(() => {
          })
    },
    async getData() {
      const res = await get_deleted()
      this.lists = res.data
      this.loading = false
    },
    getItem(res) {
      var tmp = JSON.parse(res)
      return (tmp["title"] || "") + " / " + (tmp["tip"] || "");
    },
    getShort(date) {
      const dateObj = new Date(date);
      const year = dateObj.getFullYear();
      const month = dateObj.getMonth() + 1; // 月份从0开始，所以需要加1
      const day = dateObj.getDate();
      const hours = dateObj.getHours();
      const minutes = dateObj.getMinutes();
      const seconds = dateObj.getSeconds();
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
  },
};
</script>

<template>
  <div class="w-full h-full flex flex-col items-center px-3 py-1.5">
    <el-empty v-if="lists.length===0&&!loading"/>
    <div v-for="item in lists" class="max-w-5xl w-full bg-white my-1.5 px-4 py-4 rounded-xl">
      <div class="flex my-1">
        <div class=" w-32 text-gray-500">问卷ID：</div>
        <div class="flex-1">{{ item.question_id }}</div>
      </div>
      <div class="flex my-1">
        <div class=" w-32 text-gray-500"> 问卷收集数：</div>
        <div class="flex-1">{{ item.count }}</div>
      </div>
      <div class="flex my-1">
        <div class=" w-32 text-gray-500">问卷内容：</div>
        <div class="flex-1">{{ getItem(item.content) }}</div>
      </div>
      <div class="flex my-1">
        <div class=" w-32 text-gray-500">问卷创建时间：</div>
        <div class="flex-1">{{ getShort(item.create_time) }}</div>
      </div>
      <div class="flex">
        <div @click="recover(item.question_id)"
             class=" flex items-center hover:opacity-50 cursor-pointer select-none mt-2 px-4 py-1.5 rounded-full text-sm text-gray-700 bg-gray-100">
          <el-icon class="mr-1">
            <Files/>
          </el-icon>
          恢复问卷
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>


</style>
